<template>
   <div class="edit-pass-word-box" id="edit-pass-word-page">
    <mobileNavbar :name="$t('message.userInfo.setPassword')" @back="handleBack" ref="navbar"></mobileNavbar>
    <div class="pass-word-content">
      <div class="name-box">{{$t('message.text.user')}}:{{userInfo.realName}}</div>
      <div class="password-tip">{{$t('message.text.passwordTips')}}</div>
      <div class="password-input-boxs">
        <div class="password-input">
          <el-input v-model="firstPassword" :placeholder="$t('message.placeholder.pleaseNewPassword')" type="password" @keyup.enter="handleClick"></el-input>
        </div>
        <div class="password-input">
          <el-input v-model="secondPassword" :placeholder="$t('message.placeholder.pleaseAgainPassword')" type="password" @keyup.enter="handleClick"></el-input>
        </div>
      </div>
      <div class="button-box" v-loading='submitLoading' :class="[(firstPassword.length<6 ||secondPassword<6||firstPassword!=secondPassword) &&'button-disable']" @click="handleClick">
        {{$t('message.buttons.submit')}}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
const router = useRouter();
import mobileNavbar from './mobileNavbar.vue';
import { setPassWord } from "@/api/user"
import { enCodePasswordKey } from "@/const/const"
import { encryption } from "@/utils/util";
import { getStore } from '@/utils/store'
const emit = defineEmits([""])
const props = defineProps({

})
const navbar = ref()
const firstPassword = ref('')
const secondPassword= ref('')
const submitLoading = ref(false)
const userInfo = ref({})
onMounted(()=>{
  userInfo.value = getStore({name:'userInfo'}) || {tenant:{}}
})
function handleClick(){
  if((firstPassword.value.length<6 ||secondPassword.value<6||firstPassword.value!=secondPassword.value) || submitLoading.value) return
  submitLoading.value = true
  // 提交密码
  let obj = {
    password:firstPassword.value,
    rePassword:secondPassword.value
  }
  let temp = encryption({
    data: obj,
    key: enCodePasswordKey, // enCodePasswordKey,
    param: ["password"]
  });
  temp = encryption({
    data: temp,
    key: enCodePasswordKey, // enCodePasswordKey,
    param: ["rePassword"]
  });
  setPassWord(temp).then(res => {
    if(res.data.code == 0) {
      proxy.$mobileMessage({
        text:$t('message.message.editPasswordSuccess'),
        type:'success'
      })
      submitLoading.value = false
      navbar.value.back()
    }
  }).catch(() => {
    submitLoading.value = false
  })
}
function handleBack(val){
  router.push(val)
}

</script>
<style lang="scss" scoped>
.edit-pass-word-box{
  .pass-word-content{
    padding: 1rem .9375rem 0px;
    .name-box{
      @include SourceHanSansCN-Medium;
      font-size: 1rem;
      color: #363B4C;
    }
    .password-tip{
      @include SourceHanSansCN-Regular;
      font-size: .875rem;
      color: #6f7588;
      margin-top: .5rem;
      margin-bottom:1.375rem;
    }
    .password-input-boxs{
      .password-input{
        height: 3rem;
        background: #F5F6F7;
        border-radius: .375rem;
        opacity: 1;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        ::v-deep(.el-input){
          .el-input__wrapper{
            border:none !important;
            background-color: transparent !important;
            box-shadow: none !important;
            &::-webkit-input-placeholder{
              font-size: .875rem;
              color: #6f7588;
              @include SourceHanSansCN-Regular;
            }
          }
        }
      }
    }
    .button-box{
      height: 3rem;
      background: #1E6FFF;
      border-radius: .375rem;
      overflow: hidden;
      font-size: .875rem;
      @include SourceHanSansCN-Medium;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: .0625rem;
    }
    .button-disable{
      background: #8EB7FF;
    }
  }
}
</style>